<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码 -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        :fullscreen="true"
    >
        <template #header>
            <div class="title">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <el-tabs v-model="activeName" class="goods-tabs" stretch>
                <div
                    class="ba-operate-form"
                    :class="'ba-' + baTable.form.operate + '-form'"
                    :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
                >
                    <el-form
                        v-if="!baTable.form.loading"
                        ref="formRef"
                        @submit.prevent=""
                        :model="baTable.form.items"
                        label-position="right"
                        :label-width="baTable.form.labelWidth + 'px'"
                        :rules="rules"
                        scroll-to-error
                    >
                        <el-tab-pane :label="t('shop.goods.goods.base_info')" name="base">
<!--                            <FormItem :label="t('shop.goods.goods.store')" type="remoteSelect" v-model="baTable.form.items!.store_id" prop="store_id" :input-attr="{ pk: 'ba_store_store.id', field: 'name', remoteUrl: '/admin/store.Store/index' }" :placeholder="t('Please select field', { field: t('shop.goods.goods.store') })" />-->
                            <FormItem
                                :label="t('shop.goods.goods.name')"
                                type="string"
                                v-model="baTable.form.items!.name"
                                prop="name"
                                :placeholder="t('Please input field', { field: t('shop.goods.goods.name') })"
                                class="goods-form"
                            />

                            <el-form-item :label="t('shop.goods.goods.classify_id')" prop="classify_id" required class="goods-form">
                                <el-select
                                    v-model="baTable.form.items!.classify_id"
                                    :placeholder="t('Please select field', { field: t('shop.goods.goods.classify_id') })"
                                    multiple
                                    style="width: 700px"
                                    filterable
                                >
                                    <el-option-group v-for="group in baTable.form.extend!.goodsClassifyData" :key="group.label" :label="group.label">
                                        <el-option v-if="group.children.length <= 0" label="暂无子级分类" :value="group.id" disabled />
                                        <el-option v-else v-for="item in group.children" :key="item.value" :label="item.label" :value="item.value" />
                                        <div style="height: 1px; background-color: #ebeef5; margin: 6px 16px"></div>
                                    </el-option-group>
                                </el-select>
                            </el-form-item>
                            <FormItem :label="t('shop.goods.goods.images')" type="images" v-model="baTable.form.items!.images" prop="images" />
                            <FormItem
                                :label="t('shop.goods.goods.status')"
                                type="radio"
                                v-model="baTable.form.items!.status"
                                prop="status"
                                :data="{
                                    content: { '0': t('shop.goods.goods.status 0'), '1': t('shop.goods.goods.status 1') },
                                    childrenAttr: { border: true },
                                }"
                                :placeholder="t('Please select field', { field: t('shop.goods.goods.status') })"
                            />
                            <FormItem
                                :label="t('是否使用优惠券')"
                                type="radio"
                                v-model="baTable.form.items!.is_coupon"
                                prop="is_coupon"
                                :data="{
                                    content: { '0': t('否'), '1': t('是') },
                                    childrenAttr: { border: true },
                                }"
                                :placeholder="t('Please select field', { field: t('是否使用优惠券') })"
                            />
                            <FormItem class="goods-form" :label="t('上架时间')" type="datetime" v-model="baTable.form.items!.status_up_time" prop="status_up_time" :placeholder="t('Please select field', { field: t('上架时间') })" />
                            <FormItem class="goods-form" :label="t('下架时间')" type="datetime" v-model="baTable.form.items!.status_down_time" prop="status_down_time" :placeholder="t('Please select field', { field: t('下架时间') })" />
                            <FormItem
                                label="打手人数"
                                type="radio"
                                v-model="baTable.form.items!.number_of_people"
                                :input-attr="{ size: 'large' }"
                                :data="{ childrenAttr: { border: true }, content: { 1:'1人',2: '2人', 3: '3人' } }"
                                prop="status_up_time"
                            />


                        </el-tab-pane>

                        <el-tab-pane :label="t('shop.goods.goods.spec_and_stock')" name="spec">
                            <goodsSpec
                                v-model="baTable.form.items!.spec_data"
                                :specTemplateConfig="{
                                    enable: true,
                                    data: baTable.form.extend!.goodsSpecTemplateData,
                                }"
                                :skuField="{
                                    price: {
                                        label: t('shop.goods.goods.spec_price'),
                                        attr: {
                                            precision: 2,
                                            min: 0.01,
                                        },
                                    },
                                    origin_price: {
                                        label: t('shop.goods.goods.spec_origin_price'),
                                        attr: {
                                            precision: 2,
                                            min: 0.01,
                                        },
                                    },
                                    stock: {
                                        label: t('shop.goods.goods.spec_stock'),
                                        attr: {
                                            precision: 0,
                                            min: 0,
                                        },
                                    },
                                    weight: {
                                        label: t('shop.goods.goods.spec_weight'),
                                        attr: {
                                            precision: 3,
                                            min: 0.001,
                                        },
                                    },
                                    volume: {
                                        label: t('shop.goods.goods.spec_volumn'),
                                        attr: {
                                            precision: 3,
                                            min: 0.001,
                                        },
                                    },
                                    sku_code: {
                                        label: t('shop.goods.goods.sku_code'),
                                        attr: {
                                            type: 'text',
                                        },
                                    },
                                    stock_alert: {
                                        label: t('shop.goods.goods.stock_alert'),
                                    },
                                }"
                            />
                            <FormItem
                                :label="t('shop.goods.goods.deduct_stock_type')"
                                type="radio"
                                v-model="baTable.form.items!.deduct_stock_type"
                                prop="deduct_stock_type"
                                :input-attr="{
                                    content: { '1': t('shop.goods.goods.deduct_stock_type 1'), '2': t('shop.goods.goods.deduct_stock_type 2') },
                                    childrenAttr: { border: true },
                                }"
                            />
                            <input-number
                                :label="t('shop.goods.goods.stock_alert')"
                                v-model="baTable.form.items!.stock_alert"
                                prop="stock_alert"
                                :placeholder="t('Please input field', { field: t('shop.goods.goods.stock_alert') })"
                                :input-attr="{
                                    min: 0,
                                }"
                                style="width: 460px"
                            />
                        </el-tab-pane>

                        <el-tab-pane :label="t('shop.goods.goods.detail_info')" name="info">
                            <goodsParams
                                v-model="baTable.form.items!.params"
                                :key-title="t('shop.goods.goods.params_key')"
                                :value-title="t('shop.goods.goods.params_value')"
                                :template-data="baTable.form.extend!.goodsParamsTemplateData"
                            />

                            <FormItem
                                :label="t('shop.goods.goods.detail_images')"
                                type="images"
                                v-model="baTable.form.items!.detail_images"
                                prop="detail_images"
                            />
                        </el-tab-pane>

                        <el-tab-pane :label="t('shop.goods.goods.delivery_info')" name="delivery">
                            <FormItem
                                :label="t('shop.goods.goods.delivery_type')"
                                type="radio"
                                v-model="baTable.form.items!.delivery_type"
                                prop="delivery_type"
                                :data="{
                                    content: { '1': t('shop.goods.goods.delivery_type 1'), '2': t('shop.goods.goods.delivery_type 2') },
                                    childrenAttr: { border: true },
                                }"
                                :placeholder="t('Please select field', { field: t('shop.goods.goods.delivery_type') })"
                            />
                            <FormItem
                                v-if="baTable.form.items!.delivery_type == 1"
                                :label="t('shop.goods.goods.freight')"
                                type="number"
                                v-model="baTable.form.items!.freight"
                                prop="freight"
                                class="goods-form"
                            />
                            <FormItem
                                v-else
                                :label="t('shop.goods.goods.delivery_template')"
                                type="remoteSelect"
                                v-model="baTable.form.items!.delivery_template_id"
                                prop="delivery_template_id"
                                :input-attr="{
                                    pk: 'id',
                                    field: 'name',
                                    remoteUrl: '/admin/shop.delivery.template/index',
                                    tooltipParams: {
                                        类型: 'type_text',
                                    },
                                }"
                                class="goods-form"
                            />
                        </el-tab-pane>

                        <el-tab-pane :label="t('shop.goods.goods.more_info')" name="more">
                            <FormItem
                                :label="t('shop.goods.goods.sales_init')"
                                type="number"
                                v-model="baTable.form.items!.sales_init"
                                prop="sales_init"
                                class="goods-form"
                                :attr="{
                                    blockHelp: t('shop.goods.goods.init_sale_tip'),
                                }"
                            />
                            <FormItem
                                :label="t('shop.goods.goods.service_id')"
                                type="remoteSelect"
                                v-model="baTable.form.items!.service_id"
                                prop="service_id"
                                :input-attr="{
                                    pk: 'id',
                                    field: 'name',
                                    remoteUrl: '/admin/shop.goods.service/index',
                                    multiple: true,
                                }"
                                class="goods-form"
                            />
                        </el-tab-pane>
                    </el-form>
                </div>
            </el-tabs>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import { type FormInstance, type FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import goodsSpec from '/@/components/shop/goods/goodsSpec.vue'
import goodsParams from '/@/components/shop/goods/goodsParams.vue'
import inputNumber from '/@/components/shop/form/inputNumber.vue'

const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    name: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.name') })],
    classify_id: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.classify_id') })],
    status: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.status') })],
    images: [buildValidatorData({ name: 'required', message: t('shop.lang.fieldRequired', { field: t('shop.goods.goods.images') }) })],
    delivery_type: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.delivery_type') })],
    freight: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.freight') })],
    delivery_template_id: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.delivery_template') })],
    service_id: [buildValidatorData({ name: 'required', title: t('shop.goods.goods.service_id') })],
})

const activeName = ref('base')
</script>

<style scoped lang="scss">
.specTyleTip {
    color: red;
}

.goods-tabs {
    .el-tab-pane {
        padding-top: 20px;
    }
}

.ba-table-form-scrollbar {
    height: 80vh;
}

.goods-form {
    @media screen and (min-width: 1024px) {
        width: 50%;
    }
    .el-select {
        width: 50%;
    }
}
</style>
